<template>
  <div class="pecord-container">
    <div class="title">
      <h4>历史记录</h4>
    </div>
    <div class="content" v-if="list.length">
      <div class="pecord-item" v-for="(item, i) in list" :key="i" @touchend="search(item)">
        {{ item }}
      </div>
    </div>
    <div class="not-pecord" v-else>暂无搜索记录</div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    search(item) {
      this.$emit("search", item);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/css/globel.scss";
.pecord-container {
  margin: 20px 0;
  .title {
    padding-bottom: 10px;
    border-bottom: 1px solid #aaa;
    h4 {
      font-size: 40px;
      font-weight: 600;
      margin-left: 20px;
    }
  }
  .content {
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .pecord-item {
      padding: 5px 10px;
      border-radius: 20px;
      border: 1px solid $color;
      color: $color;
      margin-right: 15px;
      margin-bottom: 10px;
    }
  }
  .not-pecord {
    font-size: 25px;
    width: 100%;
    height: 400px;
    color: #000;
    line-height: 400px;
    text-align: center;
  }
}
</style>
